<template>
  <div class="lock-lable">
    <table>
      <tr v-for="(item, index) in datas" :key="index">
        <td>{{item.name}}</td>
        <td @click="goSecond(item)" class="values">{{item.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
interface dataList {
  name: string;
  value: string;
}
@Component
export default class LockTable extends Vue {
  @Prop() datas!: any;
  @Prop() typename!: string;
  public dataList: dataList[] = [
    {
      name: "设备总数",
      value: "140",
    },
    {
      name: "设备告警数",
      value: "140", 
    },
    {
      name: "设备在线数",
      value: "140",
    },
    {
      name: "通讯故障数",
      value: "230",
    },
  ];
  goSecond(item) {
    this.$emit("goSecond", {
      item: item,
      typename: this.typename,
    });
  }
}
</script>

<style lang="scss" scoped>
.lock-lable {
  width: 100%;
  height: 100%;
  table,
  td {
    border-collapse: collapse;
    width: 2.7rem;
    border: 1px solid #1b60b1;
    text-align: center;
    tr {
      height: 0.5rem;
    }
    tr:nth-child(2) {
      background-color: #13418a;
      :nth-child(1) {
        color: #ff8e1b;
      }
    }
    tr:nth-child(3) {
      :nth-child(1) {
        color: #1466f7;
      }
    }
    tr:nth-child(4) {
      background-color: #13418a;
      :nth-child(1) {
        color: #fc3c2d;
      }
    }
  }
  .values {
    cursor: pointer;
  }
  .values:hover {
    background: #4a6bae;
  }
}
</style>